<template>
  <div>
    <div style="height: 500px;">
      <el-col :span="8">
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <div style="padding: 14px;">
            <span>班组管理</span>
            <el-button type="text" class="button">查看更多</el-button>
          </div>
          <div class="card_div" id="tree">
<!--            <TreeChart :json="treeData" />-->
          </div>
        </el-card>
      </el-col>

      <!-- 右侧图片 -->
      <div>
        <el-col :span="16">
          <div id="img">
            <!-- 图片中的通知栏 -->
            <el-col :span="6" style="float: right;margin-right: 80px;">
              <div style="padding: 14px;">
                <span>通知栏</span>
                <el-button type="text" class="button">查看更多</el-button>
              </div>
              <div class="card_div">
                <template>
                  <div class="block">
                    <el-carousel indicator-position="none">
                      <el-carousel-item v-for="item in 3" :key="item">
                        <!-- 通知栏展示内容 -->
                        <div id="notice">
                          <div class="notice_header">
                            <p>关于端午节放假的通知</p>
                          </div>
                          <div class="notice_main">
                            <p>公司各部门：
                              <br><br>
                              根据国家法定假期的规定，并结合公司实际情况，现对端午节放假做出安排，具体如下：
                              <br><br>
                              一、放假时间：2020年6月25日（周四）至6月27日（周六），放假调休，共三天。6月28日（周日）上班。
                              <br><br>
                              二、 请各部门负责人做好本部门的节前工作安排，并检查相关设施、设备，做好防火、防盗工作，确保办公场所的安全、有序。
                              <br><br>
                              三、出行需增强自我防护意识，科学做好个人有效防护，减少聚集，保持社交距离，注意安全。
                              <br><br>
                              四、全体员工在节假日期间，请保持手机通讯畅通，注意人身财产安全，度过一个欢乐、祥和、健康的节日假期。
                              <br><br>
                              特此通知！
                              在此，预祝岳能全体同仁端午安康！
                            </p>
                          </div>
                        </div>
                      </el-carousel-item>
                    </el-carousel>
                  </div>
                </template>
              </div>
            </el-col>
          </div>
        </el-col>
      </div>
    </div>

    <!-- 后四个卡片 -->
    <div style="margin-top: -20px;">
      <el-row :gutter="50">
        <el-col :span="6">
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <div style="padding: 14px;">
              <span>值班管理</span>
              <el-button type="text" class="button">查看更多</el-button>
            </div>
            <div class="card_div">
              <template>
                <div class="block">
                  <el-carousel trigger="click">
                    <el-carousel-item v-for="item in 4" :key="item">
                      <!-- 值班管理图展示内容 -->
                      <div class="image_center">
<!--                        <el-image style="width: 80%; height: 200px;" :src="require('@/assets/img/u228.png')"></el-image>-->
                      </div>
                    </el-carousel-item>
                  </el-carousel>
                </div>
              </template>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <div style="padding: 14px;">
              <span>风场一次系统图</span>
              <el-button type="text" class="button">查看更多</el-button>
            </div>
            <div class="card_div">
              <template>
                <div class="block">
                  <el-carousel trigger="click">
                    <el-carousel-item v-for="item in 4" :key="item">
                      <!-- 风场一次系统图展示内容 -->
                      <div class="image_center">
<!--                        <el-image style="width: 80%; height: 200px;" :src="require('@/assets/img/u218.png')"></el-image>-->
                      </div>
                    </el-carousel-item>
                  </el-carousel>
                </div>
              </template>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <div style="padding: 14px;">
              <span>安全专栏</span>
              <el-button type="text" class="button">查看更多</el-button>
            </div>
            <div class="card_div">
              <div id="security_Column">
                <ul>
                  <li>
                    防止人身伤亡事故十项重点要求-广东省能源集
                  </li>
                  <li>
                    关于贵州粤电遵义风能有限公司大顶山风电场15号风机叶片开裂停机事件的通报
                  </li>
                  <li>
                    防止人身伤亡事故十项重点要求-广东省能源集团有限公司企业标准
                  </li>
                  <li>
                    关于贵州粤电遵义风能有限公司大顶山风电场15号风机叶片开裂停机事件的通报
                  </li>
                  <li>
                    防止人身伤亡事故十项重点要求-广东省能源集团有限公司企业标准
                  </li>
                  <li>
                    关于贵州粤电遵义风能有限公司大顶山风电场15号风机叶片开裂停机事件的通报
                  </li>
                </ul>
              </div>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <div style="padding: 14px;">
              <span>员工风采</span>
              <el-button type="text" class="button">查看更多</el-button>
            </div>
            <div class="card_div">
              <template>
                <div class="block">
                  <el-carousel trigger="click">
                    <el-carousel-item v-for="item in 4" :key="item">
                      <!-- 员工风采展示内容 -->
                      <div class="image_center">
<!--                        <el-image style="width: 100%; height: 200px;" :src="require('@/assets/img/u234.png')"></el-image>-->
                      </div>
                    </el-carousel-item>
                  </el-carousel>
                </div>
              </template>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// import echarts from 'echarts'
// import TreeChart from 'vue-tree-chart'
export default {
  name: 'index',
  // components: {
  //   TreeChart
  // },
  data () {
    return {
      // 树形结构数据
      treeData: {
        name: 'root',
        image_url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        class: ['rootNode'],
        children: [{
          name: 'children1',
          image_url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        },
        {
          name: 'children2',
          image_url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          mate: {
            name: 'mate',
            image_url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          },
          children: [{
            name: 'grandchild',
            image_url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          },
          {
            name: 'grandchild2',
            image_url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          },
          {
            name: 'grandchild3',
            image_url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
          }
          ]
        },
        {
          name: 'children3',
          image_url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        }
        ]
      }
    }
  },
  created () {}

}
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  /* 首页背景图片 */
  #img {
    background-image: url(../../../../assets/img/u194.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 450px;
    margin-left: 10px;
  }

  /* 卡片 */
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .card_div {
    height: 400px;

  }

  /* 通知栏走马灯 */
  #notice {
    border: 1px solid #C0C0C0;
    height: 100%;
    width: 80%;
    margin: 10px auto;
  }

  .notice_header {
    height: 30px;
    border: 2px solid #B4BCCC;
  }

  .notice_header p {
    text-align: center;
    line-height: 0px;
  }

  .notice_main {
    overflow: auto;
    max-height: 100%;
  }

  .notice_main p {
    font-size: 10px;
  }

  /* 安全专栏 */
  #security_Column {
    width: 95%;
    height: 100%;
    overflow: auto;
  }

  #security_Column ul li {
    font-size: 10px;
  }

  /* 风场一次系统图/员工风采图片居中 */
  .image_center {
    text-align: center;
  }

  /* 树形控制 */
  #tree>>>.node {
    width: 60px;

  }

  #tree>>>.person {
    width: 30px;
    height: 30px;
  }
</style>
